<template>
	<view class="search-result">
		<view class="search-fliter">
			<view class="search-warp">
				<view  @click="goBack()" class="go-back">
					<text class="tn-icon-left"></text>
				</view>
				<input class="uni-input" confirm-type="search" @input="input" :placeholder="placeholderText"
					v-model="searchValue" />
				<view class="to-btn">
					<text class="tn-icon-location"></text>
				</view>
			</view>
			<view class="filter-btns">
				<view class="btn-item" :class="{active:chooseBtn === item.id}" v-for="item in filterBtnList"
					:key="item.id">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="search-scroll-warp">
			<tn-sticky>
				<view class="sticky-content">
					<view class="location">
						<text class="tn-icon-location"></text>
						太平洋保险大厦
						<text class="tn-icon-down-triangle"></text>
					</view>
					<view class="sort-select">
						<conver-pop @show="sortShow" ref="sortPop">
							{{sortChoose.name}}
							<text class="tn-icon-down-triangle"></text>
							<template slot="content">
								<view class="sort-list">
									<view class="sort-item" v-for="item in sortList" @click="choose(item)"
										:class="{selected:sortChoose.id === item.id}" :key="item.id">
										{{item.name}}
										<text v-if="sortChoose.id === item.id"
											class="tn-icon-success icon-choose"></text>
									</view>
								</view>
							</template>
						</conver-pop>
					</view>
					<view class="condition-filter">
						<conver-pop @show="filterShow" ref="filterPop">
							筛选<text class="tn-icon-filter"></text>
							<template v-slot:content="{ data }">
								<filter-list :father-height='data.height'></filter-list>
							</template>
						</conver-pop>
					</view>
				</view>
			</tn-sticky>
			<view class="content-warp">
				<view v-for="i in 50" :key="i">
					我是列表内容{{i}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tnSticky from '@/tuniao-ui/components/tn-sticky/tn-sticky.vue'
	import tnPopup from '@/tuniao-ui/components/tn-popup/tn-popup.vue'
	import converPop from '@/libs/components/cover-pop.vue'
	import filterList from './filterList.vue'

	
	export default {
		components: {
			tnSticky,
			tnPopup,
			converPop,
			filterList
		},
		data() {
			return {
				placeholderText: '冒菜',
				searchValue: '',
				filterBtnList: [{
						name: "全部",
						id: 'all'
					},
					{
						name: '外卖',
						id: 'out'
					},
					{
						name: "到店",
						id: "in"
					}
				],
				chooseBtn: "all",
				showPop: true,
				sortList: [{
						name: '综合排序',
						id: 1
					},
					{
						name: '速度优先',
						id: 2
					},
					{
						name: '离我最近',
						id: 3
					},
					{
						name: '好评优先',
						id: 4
					},
					{
						name: '人均最低',
						id: 5
					},
					{
						name: '人均最高',
						id: 6
					},
					{
						name: '配送费最低',
						id: 7
					},
					{
						name: '起送价最低',
						id: 8
					}
				],

				sortChoose: {
					name: '综合排序',
					id: 1
				}
			}
		},
		methods: {
			input(e) {
				console.log('input', e.detail.value)
			},
			goBack() {
				uni.navigateBack()
			},
			choose(obj) {
				this.sortChoose = obj;
			},
			sortShow() {
				this.$refs.filterPop.close()
			},
			filterShow() {
				this.$refs.sortPop.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-result {
		width: 100%;
		height: 100vh;
		background-color: #eee;
		display: flex;
		flex-direction: column;

		.search-fliter {
			.search-warp {
				padding: 16rpx;
				display: flex;

				.go-back {
					width: 64rpx;
					height: 64rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
				}

				.uni-input {
					flex: 1;
					height: 64rpx;
					line-height: 64rpx;
					background-color: #fff;
					border-radius: 32rpx;
					padding: 0 32rpx;
					font-size: 32rpx;
				}

				.to-btn {
					width: 64rpx;
					height: 64rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 32rpx;
				}
			}
		}

		.filter-btns {
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;

			.btn-item {
				display: inline-block;
				padding: 16rpx 32rpx;
				color: #666;
				font-size: 32rpx;
				position: relative;

				&.active {
					color: #333;
					font-size: 34rpx;
					font-weight: bold;
				}
			}
		}

		.search-scroll-warp {
			flex: 1;
			overflow-y: auto;
			background-color: #fff;

			.sticky-content {
				display: flex;
				justify-content: space-between;
				padding: 16rpx 30rpx;

				.location {
					color: #666;
				}


				.sort-select {
					color: #000;
					font-weight: blod;
					font-size: 32rpx;

					.sort-list {
						padding: 24rpx 48rpx;
						display: flex;
						flex-direction: column;
						gap: 16rpx;

						.sort-item {
							font-size: 24rpx;
							display: flex;
							justify-content: space-between;

							&.selected {
								font-size: 28rpx;
								font-weight: bold;
							}

							.icon-choose {
								color: #0091ff;
							}
						}
					}
				}

				.condition-filter {
					color: #666;
				}
			}
		}

		.content-warp {
			padding: 24rpx 48rpx;
		}
	}
</style>